<template>
  <div class="login-container">
    <div class="login-box">
      <h1>ZT-BLOG</h1>
      <div class="login-form">
        <el-form ref="form" :rules="login_rules" :model="loginInfo">
          <el-form-item prop="userName">
            <el-input
              prefix-icon="el-icon-user"
              v-model="loginInfo.userName"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="loginInfo.password"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login('form')">登录</el-button>
            <el-button @click="reset('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginInfo: {
        userName: "",
        password: "",
      },
      login_rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 4,
            max: 15,
            message: "长度在 4 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    login(formName){
      this.$refs[formName].validate(async (valid)=>{
        if(valid){
          var d=await this.$http.post("/login",this.loginInfo);
          if(d.code==200){
            this.$message({
              type:"success",
              message:d.message,
            });
            window.sessionStorage.setItem("token",d.data)
            this.$router.push("/main")
          }else{
            this.$message({
              type:"error",
              message:d.message,
            });
          }
        }
      });
    }
  },
};
</script>
<style  scoped>
.login-container {
  background: url(../assets/bg_login.jpg) no-repeat;
  background-size: 100%;
  height: 100%;
}
.login-box {
  width: 400px;
  height: 350px;
  margin: 0 auto;
  transform: translate(0, 50%);
  text-align: center;
}
.login-form {
  margin: 30px auto;
  width: 300px;
}
</style>